<template>
  <el-dialog
    v-model="visibility"
    width="65%"
    :title="config.button.text.view"
    append-to-body
    draggable
    :close-on-click-modal="false">
    <el-descriptions
      :column="appStore.column"
      border>
      <el-descriptions-item label="资金仓库名称"> {{ props.rowData.baseCapitalWarehouseName }} </el-descriptions-item>
      <el-descriptions-item label="商品名称"> {{ props.rowData.goodsName }} </el-descriptions-item>
      <el-descriptions-item label="购买吨数"> {{ props.rowData.buyTon }} </el-descriptions-item>
      <el-descriptions-item label="购买袋数"> {{ props.rowData.buyBagCount }} </el-descriptions-item>
      <el-descriptions-item label="司机名字"> {{ props.rowData.driverName }} </el-descriptions-item>
      <el-descriptions-item label="司机电话"> {{ props.rowData.driverPhoneNumber }} </el-descriptions-item>
      <el-descriptions-item label="车牌号"> {{ props.rowData.carNumber }} </el-descriptions-item>
      <el-descriptions-item label="司机身份证号"> {{ props.rowData.driverIdCard }} </el-descriptions-item>
      <el-descriptions-item label="是否完成提货">
        {{ props.rowData.isFinishPick ? config.button.text.yes :
          config.button.text.no }}
      </el-descriptions-item>
      <el-descriptions-item label="启用状态">
        {{ props.rowData.isEnable ? config.button.text.enable :
          config.button.text.stop }}
      </el-descriptions-item>
      <el-descriptions-item label="创建人"> {{ props.rowData.createUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="创建时间"> {{ formatDateTime(props.rowData.createTime) }} </el-descriptions-item>
      <el-descriptions-item label="修改人"> {{ props.rowData.updateUserRealName }} </el-descriptions-item>
      <el-descriptions-item
        label="上次修改时间"
        :span="2">
        {{ formatDateTime(props.rowData.updateTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="修改人"> {{ props.rowData.updateUserRealName }} </el-descriptions-item>
      <el-descriptions-item label="图片" :span="2">
        <UploadFile
          ref="uploadRef"
          :show="false"
          :file-uuids="fileDataList" />
      </el-descriptions-item>
      <el-descriptions-item label="统计-已提完好吨数"> {{ logisticsInfo.pickIntactTon }} </el-descriptions-item>
      <el-descriptions-item label="	统计-已提破损吨数"> {{ logisticsInfo.pickWornTon }} </el-descriptions-item>
      <el-descriptions-item label="	统计-剩余提货吨数"> {{ logisticsInfo.residueTon }} </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      title="预览"
      v-model="dialogVisible">
      <img
        w-full
        :src="dialogImageUrl"
        alt="Preview Image" />
    </el-dialog>
    <template #footer>
      <div>
        <el-button
          type="warning"
          v-permission="validateButtonPermission(route, 1)"
          v-if="appStore.isPhone"
          @click="editInfo">
          {{ config.button.text.edit }}
        </el-button>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import { useAppStore } from "@/stores/app"
import message from "@/common/element-plus/message";
import { formatDateTime } from "@/common/utils/date";
import axios from "axios";
import { ElLoading } from "element-plus";
import ApiBaseRiceBarn from "@/api/modules/base-rice-barn";
import { validateButtonPermission } from "@/common/utils/validate";
import { useRoute } from "vue-router"
import UploadFile from "@/components/UploadFile.vue"
import ApiLogisticsRecord from "@/api/modules/logistics-record"

const route = useRoute()
const appStore = useAppStore()

const visibility = ref(false)

const props = defineProps(["rowData"])
const emits = defineEmits(["editInfo"])
const editInfo = () => {
  visibility.value=false;
  emits("editInfo",props.rowData);
}

const fileDataList = ref()
const dialogImageUrl = ref("")
const dialogVisible = ref(false)
const imageList = ref([]);
const token = localStorage.getItem(localStorage.getItem("tokenName"))
const loadingInstance = ref(null);
const logisticsInfo = ref({});

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    getLogisticsInfo(props.rowData.id);
    if (props.rowData.fileDataJson&&Array.isArray(JSON.parse(props.rowData.fileDataJson))){
      fileDataList.value = JSON.parse(props.rowData.fileDataJson);
      if (fileDataList.value.length>0){
        getImageList();
      }
    } else {
      fileDataList.value = []
    }
  }
}, { immediate: true })

//获取图片列表
const getImageList = async () => {
  let res = await ApiBaseRiceBarn.getPicture(fileDataList.value);
  imageList.value = res.data;
}

//根据id获取物流信息
const getLogisticsInfo = async (id) => {
  let res = await ApiLogisticsRecord.getLogisticsInfo(id);
  logisticsInfo.value = res.data;
}

//图片预览
const previewImg = async (info) => {
  try {
    loadingInstance.value = ElLoading.service({
      lock: true,
      text: "加载...",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
    const response = await axios.get(`${import.meta.env.VITE_API}/businessFile/Preview?fileUuid=${info.fileUuid}`, {
      responseType: "blob",
      headers: {
        "yg-token": token  // 根据后端要求设置 Token 头部
      }
    });
    const blob = new Blob([response.data], { type: response.headers["content-type"] });
    const imageUrl = URL.createObjectURL(blob);
    dialogImageUrl.value = imageUrl
    dialogVisible.value = true
    loadingInstance.value.close();
  } catch (error) {
    message.error("获取图片失败:", error);
    loadingInstance.value.close();
  }
}

defineExpose({ visibility })
</script>

<style lang="scss" scoped>
  :deep(.el-upload--picture-card){
    display: none;
  }

  .imageList{
    color: #409eff;
    li{
      display: flex;
      align-items: center;
      .el-icon{
        margin-right: 5px;
      }
    }
    li:hover{
      cursor: pointer;
    }
  }
</style>